<template>
    <div class="wrapper">
        <top-header title="维修保养" title-left="添加车辆" @leftClick="toAddCar"></top-header>
        <div class="wrapper">
            <bui-cell label="车辆信息" >
                <text class="car_info_input" @click="carChoose">{{selectCar.text}}</text>
            </bui-cell>
            <bui-cell label="联系人" >
                <input type="text" class="car_info_input" ref="input1" v-model="form.ownername" placeholder="请输入联系人"/>
            </bui-cell>
            <bui-cell label="联系方式" >
                <input type="number" class="car_info_input" ref="input2" max-length="11" v-model="form.ownerphone" placeholder="请输入联系方式"/>
            </bui-cell>
            <bui-cell :cellStyle="cellStyle" label="服务项目">
                <div class="grid_select">
                    <wxc-grid-select
                        :list="items"
                        :single="true"
                        :customStyles="customStyles"
                        @select="params => onSelect('res', params)">
                    </wxc-grid-select>
                </div>
            </bui-cell>
            <bui-cell label="公里数" v-if="form.type == 1">
                <input type="number" class="car_info_input" ref="input3" v-model="form.kilometer" placeholder="请输入公里数"/>
            </bui-cell>
            <bui-cell label="预约日期" >
                <text class="car_info_input" @click="showAppDate">{{appointTimeCont}}</text>
            </bui-cell>
            <bui-cell label="预约时间" >
                <text class="car_info_input" @click="showAppTime">{{seletTime.text}}</text>
            </bui-cell>
            <div class="button">
                <wxc-button text="下一步"
                    @wxcButtonClicked="next" :btnStyle="btnStyle"></wxc-button>
            </div>
        </div>
        <div class="side_pop" ref="side" @swipe="swipePop">
            <list>
                <cell class="cell" v-for="item in list" @click="select(item)">
                    <text class="list_cont">{{item.name}}</text>
                </cell>
            </list>
        </div>


        <am-popup
            :show.sync="isLeftShow"
            :position="position"
            :offset="offset"
            :auto-close="autoClose"
            :popup-style="style"
            width="500"
            height="900"
        >
            <list>
                <cell class="cell" v-for="item in list" @click="select(item)">
                    <text class="list_cont">{{item.brandEn}}  {{item.name}}</text>
                </cell>
            </list>
        </am-popup>
        <!--时间控件-->
        <am-date-picker
            :show.sync="pickerShow"
            :min-date="maxDate1"
            max-date="2110-01-01"
            format="YYYY-MM-DD"
            title="预约日期"
            v-model="form.appointmentdate"
            @ok="onBoarding">
        </am-date-picker>
    </div>
</template>
<script>
import { WxcCheckboxList, WxcButton,WxcGridSelect } from 'weex-ui';
const animation = weex.requireModule('animation')
import { AmPopup,AmDatePicker,AmListItem } from 'weex-amui';
import { buiCell} from 'bui-weex';
import utilFunc from '../../utils/util'
const dateTimePicker = weex.requireModule('dateTimePicker');
import header from '../../common/header'
export default {
    components: { WxcCheckboxList, WxcButton, AmPopup,buiCell,AmDatePicker,WxcGridSelect,
        AmListItem, 
        'top-header': header,  
    },
    data () {
        return {
            typechecked:'',
            token: '',
            list: [],
            selecData: '',
            items:[
                {'title':'保养'},
                {'title':'维修'},
            ],
            customStyles: {
                lineSpacing: '24',
                width: '130px',
                height: '60px',
                icon: '',
                // color: '#333333',
                checkedColor: '#ffffff',
                disabledColor: '#eeeeee',
                // borderColor: '#666666',
                checkedBorderColor: '#ffb200',
                backgroundColor: '#ffffff',
                checkedBackgroundColor: '#ffb200',
            },
            btnStyle: {
                'background-color': '#1E90FF',
            },
            form: {
                'uid': '', // 用户id
                'carid': '',  // 汽车id
                'ownername': '',  // 车主
                'ownerphone': '',  // 车主电话
                'type': '1',  // 服务项目 1保养  2 维修   汽车美容  1 美容  2 洗车
                'kilometer': '',  // 公里数
                'appointmentdate': '',  // 预约日期
                'appointmenttime': '',  // 预约时间
                'p1': '',  // 1 维修保养订单  2 汽车美容订单
                "brandid": '',
                "seriesid": '',
                "styleid": '',
            },
            servicePage: {
                "limit": 100,
                "order": "asc",
                "page": 1,
                "sort": "id",
                "uid": '', // 100068 
            },
            carList: [],
            selectCar: {
                text: '请选择车辆信息'
            },
            // appointment: {
            //     text: '请选择预约时间'
            // },
            isLeftShow: false,
            position: 'bottom',
            offset: {},
            autoClose: true,
            style: {},
            appointTime: [],
            seletTime: {
                text: '选择时间'
            },
            pickerShow: false,
            maxDate1: utilFunc.dateFormat('yyyy-MM-dd', new Date(new Date().getTime() + 24*60*60*1000)),
            appointTimeCont: '请选择日期',
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        this.servicePage.uid = user.id
        this.form.uid = user.id
        this.getServiceCarList()
        this.$router.getParams().then(data => {
            this.form.p1 = data.typ
        })
        this.$event.on('newCarInfo',(params) => {
            // params 为触发该事件所传的参数
            this.carList.push(params);
            this.dataPack(this.carList, 'carname')
        });
        this.initAppTime()
    },
    mounted () {
    },
    methods: {
        onSelect (res, { selectIndex, checked, checkedList }) {
            this.blur()
            this.typechecked=checked
            if(checked){
                switch (selectIndex) {
                    case 0:
                        this.form.type='1'
                        break
                    case 1:
                        this.form.type='2'
                        break
                }
            }
        },
        // 返回
        back () {
            this.$router.back();
        },
        // 滑动事件
        swipePop (e) {
            if (e.direction == 'left') {
                this.hide()
            }
        },
        hide () {
            // this.sideAnima(-750, 800);
            this.isLeftShow = false
        },
        sideAnima (trans, time) {
            var sideEl = this.$refs.side;
            animation.transition(sideEl, {
                styles: {
                    transform: 'translateX(' + trans + 'px)',
                    transformOrigin: 'left center'
                },
                duration: time, //ms
                timingFunction: 'ease',
                delay: 0 //ms
            }, function () {
            })
        },
        select (item) {
            switch (this.selecData) {
                    case 1: // 选择汽车
                        this.selectCar.text = item.name
                        this.form.carid = item.id
                        this.form.ownername = item.ownername
                        this.form.ownerphone = item.ownerphone
                        this.form.brandid = item.brandid
                        this.form.seriesid = item.seriesid
                        this.form.styleid = item.styleid
                        this.hide()
                        break
                    case 2: // 选择预约时间
                        this.form.appointmenttime = item.value
                        this.seletTime.text = item.name
                        this.hide()
                        break
                    default:
                        break
                }
        },
        // 调取侧栏
        showSide (list, num) {
            this.list = list
            this.selecData = num
            // this.sideAnima(750, 800);
            this.isLeftShow = true
        },
        // 封装数据
        dataPack (dataList, name) {
            for (let i = 0, length = dataList.length; i < length; i++) {
                dataList[i].name = dataList[i][name]
            }
            return dataList
        },
        
        next () {
            if (this.validterParam()) {
                this.$router.open({
                    name: 'acw.service.maintennace.choosestore',
                    type: 'PUSH',
                    params: this.form
                });
            }   
                
        },
        // 校验值
        validterParam () {
            if (!this.form['carid']) {
                this.$notice.toast({ message: '请选择车辆'})
                return false
            } else if (!this.form['ownername']) {
                this.$notice.toast({ message: '请填写车主'})
                return false
            } else if (!this.form['ownerphone']) {
                this.$notice.toast({ message: '请填写电话'})
                return false
            } else if (!this.typechecked) {
                this.$notice.toast({ message: '请选择服务项目'})
                return false
            } else if (!this.form['kilometer'] && this.form.type == 1) {
                this.$notice.toast({ message: '请填写里程'})
                return false
            } else if (!this.form['appointmentdate']) {
                this.$notice.toast({ message: '请选择日期'})
                return false
            } else if (!this.form['appointmenttime']) {
                this.$notice.toast({ message: '请选择时间'})
                return false
            } else if (!utilFunc.checkIsHasSpecialStr(this.form['ownername'])) {
                this.$notice.toast({ message: '联系人姓名只能是汉字或字母'})
                return false
            }
            return true
        },
        // 服务项目
        serviceItems (value) {
            this.form.type = value
            // this.$notice.toast({ message: this.form.type})
        },
        // 跳转添加车辆
        toAddCar () {
            this.$router.open({
                name: 'acw.service.maintennace.addcar',
                type: 'PUSH'
            });
        },
        // 查询服务车辆
        getServiceCarList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'maintenanceCar.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: this.servicePage
            }).then(resData => {
                // 成功回调
                console.log(resData)
                // this.$notice.toast({message: resData.data})
                if(resData && resData.errno == 0){
                    this.carList = this.dataPack(resData.data.items, 'carname')
                }
            }, error => {
                // 错误回调
                console.log(error)
            })
        },
        // 选择汽车
        carChoose() {
            this.blur()
            if (this.carList.length > 0) {
                this.showSide(this.carList, 1)
            } else {
                this.$notice.toast({message: '请添加车辆'})
            }
        },
        // 初始化预约时间
        initAppTime () {
            this.appointTime = [{
            //     value: 1,
            //     name: '00:00-01:00'
            // },{
            //     value: 2,
            //     name: '01:00-02:00'
            // },{
            //     value: 3,
            //     name: '02:00-03:00'
            // },{
            //     value: 4,
            //     name: '03:00-04:00'
            // },{
            //     value: 5,
            //     name: '04:00-05:00'
            // },{
            //     value: 6,
            //     name: '05:00-06:00'
            // },{
            //     value: 7,
            //     name: '06:00-07:00'
            // },{
            //     value: 8,
            //     name: '07:00-08:00'
            // },{
                value: 9,
                name: '08:00-09:00'
            },{
                value: 10,
                name: '09:00-10:00'
            },{
                value: 11,
                name: '10:00-11:00'
            },{
                value: 12,
                name: '11:00-12:00'
            },{
                value: 13,
                name: '12:00-13:00'
            },{
                value: 14,
                name: '13:00-14:00'
            },{
                value: 15,
                name: '14:00-15:00'
            },{
                value: 16,
                name: '15:00-16:00'
            },{
                value: 17,
                name: '16:00-17:00'
            },{
                value: 18,
                name: '17:00-18:00'
            },{
                value: 19,
                name: '18:00-19:00'
            },{
                value: 20,
                name: '19:00-20:00'
            // },{
            //     value: 21,
            //     name: '20:00-21:00'
            // },{
            //     value: 22,
            //     name: '21:00-22:00'
            // },{
            //     value: 23,
            //     name: '22:00-23:00'
            // },{
            //     value: 24,
            //     name: '23:00-24:00'
            }]
        },
        // 调取日期
        showAppDate () {
            this.blur()
            this.pickerShow = true
        },
        // 调取时间
        showAppTime () {
            this.blur()
            this.showSide(this.appointTime, 2)
        },
        onBoarding (value) {
            this.appointTimeCont = value
        },
        // 输入框失去焦点
        blur () {
            if (this.$refs.input1) 
                this.$refs.input1.blur()
            if (this.$refs.input2) 
                this.$refs.input2.blur()
            if (this.$refs.input3) 
                this.$refs.input3.blur()
        }
    }
}
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.button{
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
/* 左侧弹窗 */
.side_pop{
    position: absolute;
    top: 138px;
    background-color: #fff;
    width: 750px;
    height: 1334px;
    padding-top: 100px;
    left: -750px;
}
.cell{
    width: 750px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.list_cont{
    color: #333;
    font-size: 30px;
    height: 100px;
    line-height: 100px;
    margin-left: 20px;
}
.car_info_input{
    width: 500px;
    border-style: solid;
    border-width: 1px;
    border-color: #fff;
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
    outline-color: #fff;
}
.data_picker{
    border-color: #fff;
    height: 100px;
}
.grid_select{
    margin-left: 50px;
}
</style>
